<script setup>
import Foot from '../../components/foot.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goCode = () => {
    router.push('/code')
}
</script>
<template>
    <div class="white"></div>
    <div class="header">
        <div class="w">
            <div class="title">心理健康教师岗位<br>
                能力建设落地班</div>
            <div class="text">聚焦学校场景心理健康危机预防</div>
        </div>
    </div>
    <img class="img" src="/image/message1.png" alt="">
    <img class="img" src="/image/message2.png" alt="">
    <img class="img" src="/image/message3.png" alt="">
    <Foot></Foot>
    <div class="fixed">
        <div class="w">
            <div class="finally" @click="goCode">添加老师，咨询详情</div>
        </div>
    </div>
</template>
<style scoped>
@keyframes size {
    0% {
        font-size: 18px;
    }

    50% {
        font-size: 24px;
    }

    100% {
        font-size: 18px;
    }
}

.white {
    width: 100%;
    height: 60px;
    background-color: white;
}

.w {
    width: 342px;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 210px;
    background: url(/image/bg7.png);
    background-size: 100% 210px;

    .title {
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        padding-top: 40px;
    }

    .text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.6;
        margin-top: 16px;
    }
}

.img {
    width: 100%;
}

.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #FF6701;

    .finally {
        font-size: 18px;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 60px;
        text-align: center;
        animation: size 3s linear infinite;
    }
}
</style>